import {useEffect} from 'react';
import {connect} from 'react-redux';
import {View, Text} from '@tarojs/components';
import {AtButton} from 'taro-ui';
import {Empty} from '@nutui/nutui-react-taro';

import './index.scss'
import Taro from "@tarojs/taro";

function Recharge(props) {
  const {dispatch, mergeList: recordList = []} = props;
  useEffect(() => {
    dispatch({
      type: 'invoice/initStep2'
    })
  }, [dispatch]);

  function invoiceCard(i, index) {
    const {
      operationType = '',
      sumActuallyAmount = 0,
      tenantName = '金冠智能开关',
    } = i;
    return (
      <View className='cardWrap' key={index}>
        <View className='invoiceLine'>
          <View className='type'>
            <View>开票运营商: <Text style={{color: '#1a9d34'}}>{tenantName}</Text></View>
          </View>
          <View className='money' style={{color: operationType === 1 ? '#048FFF' : '#048FFF'}}>
            <Text
              style={{fontSize: '26rpx'}}>实付:</Text> {sumActuallyAmount ? (sumActuallyAmount / 100).toFixed(2) : '0.00'}<Text
            style={{fontSize: '26rpx'}}>元</Text>
          </View>
          {/*<View className='type'>电费: {sumElectricChargeAmount ? (sumElectricChargeAmount / 100).toFixed(2) : 0.00}元</View>*/}
          {/*<View className='type'>服务费: {sumServiceChargeAmount ? (sumServiceChargeAmount / 100).toFixed(2) : 0.00}元</View>*/}
        </View>
      </View>
    )
  }

  return (
    <View className='rechargeWrap'>
      <View className='cardWrap' key='tips'>
        <View className='textLineNew'>
          <View className='type'>开票须知</View>
          <View className='cardTitle'>1. 开票金额为用户实际支付金额(不含返利返佣)</View>
          <View className='cardTitle'>2. 电子发票会在开票确认后的20个工作日内开出</View>
          <View className='cardTitle'>3. 单笔订单只支持开具一种发票类型</View>
          <View className='cardTitle'>4. 金冠智充仅为平台方，实际开票主体以申请开票时展示的开票运营商公司为准</View>
          <View className='cardTitle'>5. 发票由各家电站运营商提供，一起申请可能会生成多张发票</View>
          <View className='cardTitle'>6.
            若超过20个工作日仍未收到电子发票，您可以通过(区号)+12366向开票公司所在区域的主管税务机关进行反馈处理</View>
        </View>
        {/*<View className='textLine'>*/}
        {/*  <View>*/}
        {/*    <View className='type'>*/}
        {/*      <View>开票运营商: 金冠智能开关</View>*/}
        {/*    </View>*/}
        {/*    <View className='type'>电费: 16.56元</View>*/}
        {/*    <View className='type'>服务费: 6.65元</View>*/}
        {/*  </View>*/}
        {/*</View>*/}
      </View>
      <View className='listWrap'>
        {
          recordList && recordList.length ? [...recordList].map((i, index) => invoiceCard(i, index)) :
            <Empty style={{backgroundColor: 'transparent', paddingTop: '100rpx'}}/>
        }
      </View>
      <View className='pageFooter'>
        <View className='secondLine'>
          <View className='firstLine'>
            <Text style={{fontSize: '36rpx', color: '#FA6400',}}>{recordList.length}</Text>张发票,
            共<Text style={{fontSize: '36rpx', color: '#FA6400'}}>
            {(recordList.reduce((pre, cur) => parseFloat(cur.sumActuallyAmount) + parseFloat(pre), 0) / 100).toFixed(2)}</Text>元
          </View>
          <View className='buttonInFooter'>
            <AtButton
              disabled={!recordList.length}
              // loading={startLoading}
              onClick={() => {
                console.log('下一步');
                Taro.navigateTo({url: '/moduleA/pages/invoice/invoiceForm'})
              }}
            >下一步</AtButton>
          </View>
        </View>
      </View>
    </View>
  )
}

export default connect(({invoice}) => {
  return {...invoice}
})(Recharge)
